<template>
  <div class="dashboard-container">
    <h1>管理员控制台</h1>
    
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon orders-icon">📦</div>
        <div class="stat-content">
          <div class="stat-value">152</div>
          <div class="stat-label">今日订单</div>
          <div class="stat-trend">
            <span class="growth">+12.5%</span>较昨日
          </div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon sales-icon">💰</div>
        <div class="stat-content">
          <div class="stat-value">¥25,362</div>
          <div class="stat-label">今日销售额</div>
          <div class="stat-trend">
            <span class="growth">+8.3%</span>较昨日
          </div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon users-icon">👥</div>
        <div class="stat-content">
          <div class="stat-value">86</div>
          <div class="stat-label">新增用户</div>
          <div class="stat-trend">
            <span class="growth">+5.2%</span>较昨日
          </div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon products-icon">🛒</div>
        <div class="stat-content">
          <div class="stat-value">1,024</div>
          <div class="stat-label">商品总数</div>
          <div class="stat-trend">
            <span class="growth">+3.1%</span>较上周
          </div>
        </div>
      </div>
    </div>
    
    <div class="chart-row">
      <div class="chart-container sales-trend">
        <h2>销售趋势</h2>
        <div ref="salesChart" class="chart"></div>
      </div>
      
      <div class="chart-container user-distribution">
        <h2>用户分布</h2>
        <div ref="userChart" class="chart"></div>
      </div>
    </div>
    
    <div class="chart-row">
      <div class="chart-container product-categories">
        <h2>商品分类销售占比</h2>
        <div ref="categoryChart" class="chart"></div>
      </div>
      
      <div class="chart-container recent-orders">
        <h2>最近订单</h2>
        <table class="orders-table">
          <thead>
            <tr>
              <th>订单号</th>
              <th>客户</th>
              <th>金额</th>
              <th>状态</th>
              <th>时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(order, index) in recentOrders" :key="index">
              <td>{{ order.id }}</td>
              <td>{{ order.customer }}</td>
              <td>¥{{ order.amount }}</td>
              <td>
                <span :class="['status-badge', getStatusClass(order.status)]">
                  {{ order.status }}
                </span>
              </td>
              <td>{{ order.time }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import { LineChart, BarChart, PieChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  BarChart,
  PieChart,
  CanvasRenderer
]);

export default {
  name: 'Dashboard',
  data() {
    return {
      salesChart: null,
      userChart: null,
      categoryChart: null,
      recentOrders: [
        { id: 'ORD20230625001', customer: '张三', amount: '459.00', status: '已完成', time: '10:30' },
        { id: 'ORD20230624005', customer: '李四', amount: '3298.00', status: '已发货', time: '15:45' },
        { id: 'ORD20230624003', customer: '王五', amount: '2599.00', status: '待发货', time: '11:20' },
        { id: 'ORD20230623008', customer: '赵六', amount: '1257.00', status: '已完成', time: '16:30' },
        { id: 'ORD20230623006', customer: '钱七', amount: '3299.00', status: '待付款', time: '14:15' }
      ]
    };
  },
  mounted() {
    this.initSalesChart();
    this.initUserChart();
    this.initCategoryChart();
    
    // 响应式调整图表大小
    window.addEventListener('resize', this.resizeCharts);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.resizeCharts);
    
    // 销毁图表实例
    if (this.salesChart) {
      this.salesChart.dispose();
    }
    if (this.userChart) {
      this.userChart.dispose();
    }
    if (this.categoryChart) {
      this.categoryChart.dispose();
    }
  },
  methods: {
    initSalesChart() {
      this.salesChart = echarts.init(this.$refs.salesChart);
      
      const option = {
        title: {
          text: '近30天销售趋势',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: [
            '6-1', '6-2', '6-3', '6-4', '6-5', '6-6', '6-7', '6-8', '6-9', '6-10',
            '6-11', '6-12', '6-13', '6-14', '6-15', '6-16', '6-17', '6-18', '6-19', '6-20',
            '6-21', '6-22', '6-23', '6-24', '6-25', '6-26', '6-27', '6-28', '6-29', '6-30'
          ]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '销售额',
            type: 'line',
            data: [
              12000, 13200, 10100, 13400, 19000, 23400, 21200,
              19500, 17800, 16500, 17500, 19700, 18100, 16800,
              15500, 14800, 16100, 17500, 19200, 21500, 25800,
              27100, 24300, 21200, 25300, 26500, 23400, 18500,
              20100, 22500
            ],
            smooth: true,
            lineStyle: {
              color: '#4a90e2'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(74, 144, 226, 0.3)' },
                  { offset: 1, color: 'rgba(74, 144, 226, 0.1)' }
                ]
              }
            }
          }
        ]
      };
      
      this.salesChart.setOption(option);
    },
    initUserChart() {
      this.userChart = echarts.init(this.$refs.userChart);
      
      const option = {
        title: {
          text: '用户类型',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: ['普通用户', 'VIP用户', '商家用户', '企业用户']
        },
        series: [
          {
            name: '用户类型',
            type: 'pie',
            radius: '60%',
            data: [
              { value: 735, name: '普通用户' },
              { value: 310, name: 'VIP用户' },
              { value: 234, name: '商家用户' },
              { value: 135, name: '企业用户' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      
      this.userChart.setOption(option);
    },
    initCategoryChart() {
      this.categoryChart = echarts.init(this.$refs.categoryChart);
      
      const option = {
        title: {
          text: '商品分类销售额',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['服装', '电子', '家居', '食品', '美妆', '母婴', '运动']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '销售额',
            type: 'bar',
            data: [
              { value: 58000, itemStyle: { color: '#4a90e2' } },
              { value: 82000, itemStyle: { color: '#ff6b6b' } },
              { value: 41000, itemStyle: { color: '#4caf50' } },
              { value: 35000, itemStyle: { color: '#ff9800' } },
              { value: 29000, itemStyle: { color: '#9c27b0' } },
              { value: 33000, itemStyle: { color: '#2196f3' } },
              { value: 27000, itemStyle: { color: '#607d8b' } }
            ],
            barWidth: '40%'
          }
        ]
      };
      
      this.categoryChart.setOption(option);
    },
    resizeCharts() {
      if (this.salesChart) {
        this.salesChart.resize();
      }
      if (this.userChart) {
        this.userChart.resize();
      }
      if (this.categoryChart) {
        this.categoryChart.resize();
      }
    },
    getStatusClass(status) {
      const statusClassMap = {
        '待付款': 'status-pending',
        '待发货': 'status-paid',
        '已发货': 'status-shipped',
        '已完成': 'status-completed',
        '已取消': 'status-cancelled'
      };
      return statusClassMap[status] || '';
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}

.stats-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1;
  min-width: 200px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  align-items: center;
}

.stat-icon {
  font-size: 24px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.orders-icon {
  background-color: #e3f2fd;
  color: #1976d2;
}

.sales-icon {
  background-color: #e8f5e9;
  color: #388e3c;
}

.users-icon {
  background-color: #fff8e1;
  color: #ff8f00;
}

.products-icon {
  background-color: #f3e5f5;
  color: #7b1fa2;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.growth {
  color: #4caf50;
  font-weight: bold;
  margin-right: 5px;
}

.stat-trend {
  font-size: 12px;
  color: #666;
}

.chart-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-container {
  flex: 1;
  min-width: 300px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.chart-container h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 16px;
  color: #333;
}

.chart {
  width: 100%;
  height: 300px;
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
}

.orders-table th,
.orders-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.orders-table th {
  font-weight: bold;
  color: #333;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 15px;
  font-size: 12px;
}

.status-pending {
  background-color: #fff8e1;
  color: #ff8f00;
}

.status-paid {
  background-color: #e3f2fd;
  color: #1976d2;
}

.status-shipped {
  background-color: #e8f5e9;
  color: #388e3c;
}

.status-completed {
  background-color: #e0f2f1;
  color: #00796b;
}

.status-cancelled {
  background-color: #ffebee;
  color: #d32f2f;
}

@media (max-width: 768px) {
  .stats-cards {
    flex-direction: column;
  }
  
  .chart-row {
    flex-direction: column;
  }
}
</style>